<template>
  <view class="container">
    <view style="height: 8rpx;"></view>
    <view class="my-header">
      <image
        src="@/static/user/user.png"
        style="width: 112rpx; height: 112rpx"
        mode="scaleToFill"
      />
      <text class="username">游客1045</text>
    </view>
    <view class="my-card">
      <view class="my-card-left-user">
        <image
          src="@/static/user/username.png"
          style="width: 48rpx; height: 48rpx"
          mode="scaleToFill"
        />
        <text class="usertext"> 常用就诊人 </text>
      </view>
      <view>|</view>
      <view class="my-card-right-im active">
        <image
          src="@/static/user/im.png"
          style="width: 48rpx; height: 48rpx"
          mode="scaleToFill"
        />
        <text class="usertext"> 我的问诊 </text>
      </view>
    </view>
  </view>
  <view class="settings">
    <tui-list-view title="" color="rgba(51, 51, 51, 1)">
      <tui-list-cell
        arrow
        v-for="item of list"
        :key="item.iconPath"
        unlined="all"
        class="settings-cell"
      >
        <image
          :src="item.iconPath"
          style="width: 48rpx; height: 48rpx"
          mode="scaleToFill"
        />
        <text class="usertext">{{ item.iconText }}</text>
      </tui-list-cell>
    </tui-list-view>
    <view style="height: 16rpx"></view>
    <tui-list-view title="" color="rgba(51, 51, 51, 1)">
      <tui-list-cell unlined="all" arrow>
        <image
          src="@/static/my/07.png"
          style="width: 48rpx; height: 48rpx"
          mode="scaleToFill"
        />
        <text class="usertext">清除缓存</text>
      </tui-list-cell>
    </tui-list-view>
  </view>
</template>

<script lang="js" setup>
import icon01 from '@/static/my/01.png'
import icon02 from '@/static/my/02.png'
import icon03 from '@/static/my/03.png'
import icon04 from '@/static/my/04.png'
import icon05 from '@/static/my/05.png'
import icon06 from '@/static/my/06.png'

const list = [
  {
    iconPath: icon01,
    iconText: '我的挂号'
  },
    {
    iconPath: icon02,
    iconText: '我的咨询'
  },
    {
    iconPath: icon03,
    iconText: '我的处方'
  },
    {
    iconPath: icon04,
    iconText: '药品订单'
  },
    {
    iconPath: icon05,
    iconText: '我的医生'
  },
    {
    iconPath: icon06,
    iconText: '意见反馈'
  }
]
</script>

<style scoped lang="scss">
.my-header {
  // margin-top: 8rpx;
  display: flex;
  align-items: center;
  height: 112rpx;
  width: 100%;

  .username {
    font-size: 32rpx;
    font-weight: 700;
    line-height: 44rpx;
    padding-left: 20rpx;
  }
  margin-bottom: 32rpx;
}

.my-card {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 32rpx 80rpx 32rpx 80rpx;
  color: rgba(255, 255, 255, 1);
  height: 112rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  background-color: rgba(38, 196, 147, 1);
  .my-card-right-im.active {
    justify-content: flex-end;
  }
  .my-card-right-im,
  .my-card-left-user {
    flex: 1;
    display: flex;
    align-items: center;

    image {
      padding-right: 12rpx;
    }
  }

  .usertext {
    font-size: 28rpx;
    font-weight: 400;
  }
}

.settings {
  .usertext {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    padding-left: 8rpx;
    vertical-align: super;
  }
}
</style>
